<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <style type="text/css">
        .error {
            border: 1px solid #a10;
        }
        .result{
            position: relative;
            top:-27px;
            left:180px;
        }
    </style>
    <script type="text/javascript" src="../js/1.4.8/angular.js"></script>
    <script type="text/javascript" src="form.js"></script>
</head>
<body>
<div ng-controller="SignController" class="container-fluid">
    <div class="row">
        <form name="signForm" novalidate ng-submit="submitForm(signForm.$valid)" class="form-horizontal">
            <h2>注册</h2>
            <div class="form-group" ng-class="{'has-success':signForm.username.$valid,'has-error':signForm.username.$invalid && signForm.username.$touched}">
                <label class="col-md-2 control-label text-right">用户名：</label>
                <div class="col-md-4">
                    <input type="text" name="username" class="form-control"
                        ng-model="userData.username" ng-required="true"
                    ng-maxlength="10" ng-minlength="4">
                    <span class="text-danger"
                       ng-if="(signForm.username.$error.minlength || signForm.username.$error.maxlength)
                                && signForm.username.$dirty">
                        用户名长度为：4-10位
                    </span>
                    <span class="text-danger"
                       ng-if="signForm.username.$error.required && signForm.username.$touched">
                        用户名不能为空！
                    </span>
                </div>
                <div class="col-md-1">
                    <i class="fa fa-check-circle text-success text-center" aria-hidden="true" ng-if="signForm.username.$valid && signForm.username.$touched"></i>
                    <!--i class="fa fa-times text-danger" aria-hidden="true" ng-if="signForm.username.$invalid && signForm.username.$touched"></i>-->
                </div>
            </div>
            <div class="form-group" ng-class="{'has-success':signForm.password.$valid ,'has-error':signForm.password.$invalid && signForm.password.$touched}">
                <label class="col-md-2 control-label">密码：</label>
                <div class="col-md-4">
                    <input type="password" name="password" class="form-control"
                        ng-model="userData.password" required ng-minlength="6" ng-maxlength="12">
                    <span class="text-danger"
                       ng-if="(signForm.password.$error.minlength || signForm.password.$error.maxlength)
                                && signForm.password.$touched">
                        密码长度为：6-12位
                    </span>
                    <p class="text-danger"
                       ng-if="signForm.password.$error.required && signForm.password.$touched">
                        密码不能为空！
                    </p>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-success':signForm.password2.$valid ,'has-error':signForm.password2.$invalid && signForm.password2.$touched}">
                <label class="col-md-2 control-label">确认密码：</label>
                <div class="col-md-4">
                    <input type="password" name="password2" class="form-control"
                    ng-model="userData.password2" required ng-minlength="6" ng-maxlength="12" compare="userData.password">
                    <span class="text-danger"
                       ng-if="(signForm.password2.$error.minlength || signForm.password2.$error.maxlength)
                                && signForm.password2.$touched">
                        密码长度为：6-12位
                    </span>
                    <p class="text-danger"
                       ng-if="signForm.password2.$error.required && signForm.password2.$touched">
                        重复密码不能为空！
                    </p>
                   <!-- <span class="text-danger"
                       ng-if="(signForm.password.$valid && signForm.password2.$valid)
                                && userData.password != userData.password2">
                        两次输入密码不一致！
                    </span>-->
                    <span class="text-danger"
                          ng-if="(signForm.password2.$error.compare && signForm.password2.$dirty)">
                        两次输入密码不一致！
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-4">
                    <button class="btn btn-primary" ng-disabled="signForm.$invalid" type="submit">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>